<template>
    <!-- 头部搜索 -->
    <search-bar v-if="$store.state.searchBar"></search-bar>

    <!--表头-->
    <el-row :gutter="10" justify="space-between">
        <el-col :xs="24" :sm="8" class="d-flex mb-2">
            <!--左侧 添加按钮组件-->
            <el-button-group>
                <template v-if="barData.addition.visible">
                    <!--弹窗添加-->
                    <el-button type="success" v-if="barData.addition.type=='dialog'" @click="add">
                        <i class="fa fa-plus"></i>
                    </el-button>
                    <!--新的页面添加-->
                    <el-button type="success" v-else-if="barData.addition.type=='link'" @click="jump">
<!--                        <router-link :to="barData.addition.data.url" class="text-decoration-none"-->
<!--                                     style="width: 100%;height: 100%">-->
                            <i class="fa fa-plus"></i>
<!--                        </router-link>-->
                    </el-button>
                </template>
                <el-button type="info" @click="reload">
                    <i class="fa fa-refresh"></i>
                </el-button>
            </el-button-group>
        </el-col>

        <!--右侧-->
        <el-col :xs="24" :sm="16" class="d-flex justify-content-end mb-3">
            <el-scrollbar class="flex-fill">
                <div class="d-flex justify-content-end" style="min-width: 150px;">
                    <el-input
                            v-if="barData.searchInput"
                            v-model="input"
                            placeholder="id快捷搜索"
                            style="max-width: 300px;min-width: 80px"
                    />
                    &nbsp;
                    <el-button-group class="d-flex">
                        <el-button type="success" v-if="barData.download"><i class="fa fa-download"></i></el-button>

                        <!--下拉选择-->
                        <el-dropdown trigger="click" :hide-on-click="false" max-height="300">
                            <el-button type="success"><i class="fa fa-th"></i></el-button>
                            <template #dropdown>
                                <el-scrollbar>
                                    <el-descriptions
                                            direction="vertical"
                                            column="1"
                                            border
                                            style="max-height: 300px"
                                    >
                                        <template v-for="(item,index) in barData.fill.data" :key="index">
                                            <el-descriptions-item v-if="index%2==0"
                                                                  class-name="desc-item-hide"
                                                                  label-class-name="desc-item">
                                                <template v-slot:label>
                                                    <el-checkbox
                                                            :label="item.label"
                                                            :checked="true"
                                                            class="w-100"
                                                            @change="(val)=>{choose(val,index)}"
                                                    >
                                                    </el-checkbox>
                                                </template>
                                            </el-descriptions-item>
                                            <el-descriptions-item v-else label-class-name="desc-item-hide"
                                                                  class-name="desc-item">
                                                <el-checkbox
                                                        :label="item.label"
                                                        :checked="true"
                                                        class="w-100"
                                                        @change="(val)=>{choose(val,index)}"
                                                >
                                                </el-checkbox>
                                            </el-descriptions-item>
                                        </template>
                                    </el-descriptions>
                                </el-scrollbar>
                            </template>
                        </el-dropdown>

                        <!-- 触发搜索 -->
                        <el-button v-if="barData.search" type="primary" @click="sbShow($store.state.searchBar)">
                            <i class="fa fa-search"></i>
                        </el-button>
                    </el-button-group>
                </div>
            </el-scrollbar>


        </el-col>
    </el-row>

    <!-- 弹框-->
    <Dialog v-model:visible="visible"></Dialog>
</template>

<script lang="ts">
    import {defineComponent, nextTick, provide, ref} from 'vue'
    import {useStore} from 'vuex'
    import { useRouter } from 'vue-router'
    import Dialog from "@/components/Dialog.vue"
    import SearchBar from "@/components/SearchBar.vue"

    export default defineComponent({
        name: 'TableHeader',
        props: {
            barData: {
                type: Object,
                required: true,
                default: () => {
                    return {
                        addition: {   //添加栏
                            type: Object,
                            required: true,
                            default: {
                                visible: true,
                                type: {
                                    validator(value) {
                                        // 这个值必须与下列字符串中的其中一个相匹配
                                        return ['dialog', 'link'].includes(value)
                                    }
                                },
                                data: {      //组件的内容
                                    type: Object,
                                    required: true,
                                }
                            }
                        },
                        fill: {  //列的填充
                            type: Object,
                            required: true,
                            default: {
                                visible: true,
                                data: {}
                            }
                        },

                        searchInput: false,   //查询输入框
                        search: false,        //头部查询栏
                        download: false,      //下载
                    }
                }
            },
        },
        components: {
            Dialog,
            SearchBar
        },
        setup(props,ctx) {
            const store = useStore();

            /****刷新***********************************************************************************************************************/
            const reload = () => {
                store.state.refresh = false
                nextTick(() => {
                    store.state.refresh = true
                })
            }

            /****添加显示的 弹框***********************************************************************************************************************/
            if (props.barData.addition.type == 'dialog') {
                provide('dialog', props.barData.addition.data);
            }

            /****工具栏***********************************************************************************************************************/
            const choose = (val, index) => {
                ctx.emit('fillChange',{index,val})
            }

            //搜索条件栏展示
            const sbShow = (val) => {
                store.commit('setSearchBar', !val)
            }


            //添加方法
            const visible = ref(false);  //弹框显示
            const add = () => {
                visible.value = true;
            }

            //跳转方法
            const router = useRouter();
            const jump =()=>{
                router.push(props.barData.addition.data.url)
            }


            return {
                reload,
                add,
                visible,
                jump,
                sbShow,
                choose,
            }
        }
    })
</script>

<style scoped>
</style>
